<template>
  <div class="setOrder-con">
    <div class="w">
      <div class="set-top">
        <div class="back" @click="$router.back()">
          <img src="imgs/icon-left.png" alt="">
        </div>
        <div class="title">
          用户结算
        </div>
        <div class="search">

        </div>
      </div>
      <div class="box" v-if="showSetOrderList">
        <van-notice-bar left-icon="question-o" :scrollable="false" mode="closeable" wrapable>
          <van-swipe vertical class="notice-swipe" :autoplay="3000" :show-indicators="false">
            <van-swipe-item>上海，北京部分地区因国家疫情防控影响，</van-swipe-item>
            <van-swipe-item>商品到货存在一定延期，给您带来不便敬请谅解 </van-swipe-item>
          </van-swipe>
        </van-notice-bar>
        <!-- 地址 -->
        <div class="address">
          <div class="noAddress">
            <div class="check-box" v-if="Object.keys(checkAddress).length>0">
              <div class="user-msg" v-if="checkAddress" @click="changeAddress">
                <span class="name">{{checkAddress.name}} </span>
                <span class="phone"> {{checkAddress.tel}}</span>
                <div class="address-msg">
                  {{checkAddress.province}} {{checkAddress.city}} {{checkAddress.county}}
                </div>
              </div>
              <h2 v-else @click="addAddress">添加收货地址</h2>
              <div class="img">
                <img src="imgs/icon-right.png" alt="">
              </div>
            </div>
            <div class="default-box" v-else>
              <div class="user-msg" v-if="Object.keys(defaultAddress).length!==0" @click="changeAddress">
                <span class="name">{{defaultAddress.name}} </span>
                <span class="phone"> {{defaultAddress.tel}}</span>
                <div class="address-msg">
                  {{defaultAddress.province}} {{defaultAddress.city}} {{defaultAddress.county}}
                </div>
              </div>
              <h2 v-else @click="addAddress">添加收货地址</h2>
              <div class="img">
                <img src="imgs/icon-right.png" alt="">
              </div>
            </div>
          </div>
        </div>
        <div class="line"></div>
        <!-- 商品信息 -->
        <div class="list">
          <div class="list-item" v-for="(item,index) in productList" :key="index">
            <div class="item-img">
              <img :src="item.imgUrl" alt="">
            </div>
            <div class="itme-name">
              {{item.name}}
            </div>
            <h2 class="item-price">
              <span class="num">{{item.num}} X </span>{{item.price}}.00
            </h2>
          </div>
        </div>
        <div class="line"></div>
        <!-- 邮费 -->
        <div class="postage">
          <h2>邮费</h2>
          <span>包邮</span>
        </div>
        <div class="line"></div>
        <!-- 总价 -->
        <div class="sum">
          <h3>商品价格：<span>{{price}}.00</span></h3>
          <h3>邮费价格：<span>0.00</span></h3>
        </div>
        <div class="line"></div>
      </div>
      <NoList v-else></NoList>
    </div>
    <div class="footer" v-show="showSetOrderList">
      <div class="footer-price">
        <div class="num">共 {{sum}} 件</div>
        <div class="price">共计 {{price}} 元</div>
      </div>
      <div class="goBuy" @click="Pay">
        立即结算
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex'
import { get } from '@/Storage/index.js'
import dayjs from 'dayjs'
export default {
  name: 'SetOrder',
  data() {
    return {
      productList: []
    }
  },
  created() {
    this.getProduct()
  },
  methods: {
    // 用户没有地址给用户添加地址
    addAddress() {
      this.$store.commit('CHANGEORSELETED', false)
      this.$router.push('/address/addAddress')
    },
    // 页面一加载就获取要购买的商品
    getProduct() {
      const type = get('productList')
      if (type.constructor === Object) {
        this.productList.push(type)
      } else {
        this.productList = type
      }
    },

    // 提交订单
    async Pay() {
      // 判断用户提交订单有没有选中收货地址
      if (Object.keys(this.defaultAddress).length === 0 && Object.keys(this.checkAddress).length === 0) {
        this.$dialog.alert({
          message: '请选择收货地址'
        })
      } else {
        const time = dayjs().format('YYYY-MM-DD HH:mm')
        const address = Object.keys(this.checkAddress).length > 0 ? this.checkAddress : this.defaultAddress
        const data = { time, product: this.productList, address, price: this.price }
        try {
          const res = await this.$store.dispatch('addOrderList', data)
          // 提交订单后删除购物车中的数据
          this.productList.forEach(item => {
            if (item.status === false) {
              this.$store.commit('CLEARSHOPCART', item.id)
            }
          })
          // 清空当前页面的数据
          this.$store.commit('CHANGESHOWORDER', false)
          this.$router.push(`/pay/${res}`)
        } catch (error) {}
      }
    },
    // 订单页添加地址
    changeAddress() {
      this.$store.commit('CHANGEORSELETED', false)
      this.$router.push('/address/addressList')
    }
  },
  computed: {
    ...mapGetters(['nowUser', 'defaultAddress']),
    ...mapState(['checkAddress', 'showSetOrderList']),
    // 计算出商品的数量和总价
    price() {
      return this.productList.reduce((sum, item) => (sum += item.num * item.price), 0)
    },
    sum() {
      return this.productList.reduce((sum, item) => (sum += item.num), 0)
    }
  },
  destroyed() {
    this.$store.commit('CLEARCHECKEDADDRESS')
  }
}
</script>

<style lang="less" scoped>
.setOrder-con {
  font-size: 28px;
  .van-notice-bar {
    height: 100px;
    line-height: 100px;
    font-size: 28px;
  }
  .notice-swipe {
    height: 100px;
    line-height: 100px;
  }
  .w {
    width: 720px;
    margin: 0 auto;
    .set-top {
      display: flex;
      min-height: 50px;
      background-color: #f2f2f2;
      font-size: 22px;
      text-align: center;
      align-items: center;
      .back {
        padding: 0 30px;
      }
      img {
        width: 50px;
        height: 50px;
      }
      .title {
        width: 100%;
      }
      .search {
        width: 60px;
        padding: 0 30px;
      }
    }
    .address {
      .noAddress {
        padding: 40px 40px 30px;
        background: url('../../../public/imgs/bd1.png') 0 0 repeat-x;
        background-size: 52px 8px;
        .check-box {
          display: flex;
          align-items: center;
          justify-content: space-between;
        }
        .default-box {
          display: flex;
          justify-content: space-between;
        }
        h2 {
          width: 100%;
        }
        .img {
          img {
            width: 40px;
            height: 40px;
          }
        }
        .user-msg {
          width: 100%;
        }
      }
    }
    .list {
      .list-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 0 20px;
        padding: 14px 0;
        border-bottom: 1px solid #ccc;
        .item-img {
          margin-right: 15px;
          width: 80px;
          height: 80px;
          img {
            width: 80px;
            height: 80px;
            vertical-align: top;
          }
        }
        .itme-name {
          text-align: left;
          margin-right: 20px;
        }
        &:last-child {
          border: 0;
        }
        .item-price {
          width: 160px;
          font-size: 22px;
          .num {
            font-weight: 400;
          }
        }
      }
    }
    .postage {
      display: flex;
      justify-content: space-between;
      padding: 40px 40px 30px;
      span {
        color: #ccc;
      }
    }
    .sum {
      padding: 40px 40px 30px;
      h3 {
        margin-bottom: 15px;
        span {
          font-weight: 400;
        }
      }
    }
  }
  .footer {
    position: fixed;
    width: 100%;
    bottom: 0;
    display: flex;
    height: 100px;
    line-height: 100px;
    text-align: center;
    background: #fff;
    .footer-price {
      width: 50%;
      line-height: 28px;
      padding-top: 15px;
      .price {
        color: #ff6600;
        font-size: 32px;
        margin-top: 10px;
      }
    }

    .goBuy {
      width: 50%;
      background: #ff6600;
      color: #fff;
    }
  }
}
</style>
<style scoped>
/deep/ .van-notice-bar__left-icon {
  width: 75px;
  text-align: center;
}
</style>
